<template>
	<!-- 内容盒子 -->
	<view class="page-root-bg">
		<!-- #ifdef APP-PLUS || H5 -->
		<view style="position: fixed;top: 0;width: 100%;z-index: 9999;"
			:style="{'backgroundColor':barColor?barColor:'','height':ttop}"></view>
		<view :style="{'backgroundColor':barColor?barColor:'','padding-top':ttop}"></view>
		<!-- #endif -->
		<header-view :title="'提建议'" :showLeft="false"></header-view>
		<scroll-view class="content-box" scroll-y :style="{'height':contentHeight}">
			<!-- 提建议 begin -->
			<view class="list">
				<view v-for="(item,index) in dataList" :key="index" class="list-item" :class="'bjimg_'+index"
					@click="itemClick(item)">
					<image :src="item.icon" class="img"></image>
					<view class="desc">
						<view class="title">{{item.title}}</view>
						<view class="subtitle">{{item.subtitle}}</view>
					</view>
				</view>
				<!-- <navigator url="/pages/advise/image-text-advise" class="list-item bjimg_0">
					<image src="/static/img/advise/item_1.png" class="img"></image>
					<view class="desc">
						<view class="title">图文建议</view>
						<view class="subtitle">简洁的文字、清晰的图片更能说明问题</view>
					</view>
				</navigator>
				<navigator class="list-item bjimg_1" url="/pages/advise/recorder-advise">
					<image src="/static/img/advise/item_1.png" class="img"></image>
					<view class="desc">
						<view class="title">语音建议</view>
						<view class="subtitle">用嘴说，提高你的提问效率</view>
					</view>
				</navigator>
				<navigator class="list-item bjimg_2" url="/pages/advise/video-advise">
					<image src="/static/img/advise/item_3.png" class="img"></image>
					<view class="desc">
						<view class="title">视频随手拍</view>
						<view class="subtitle">用嘴说，提高你的提问效率</view>
					</view>
				</navigator> -->
			</view>
			<!-- 提建议 end -->
		</scroll-view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				barColor: getApp().globalData.barColor,
				ttop: getApp().globalData.ttop,
				contentHeight: getApp().globalData.winHeight,

				dataList: [{
					title: '图文建议',
					subtitle: '简洁的文字、清晰的图片更能说明问题',
					icon: '/static/img/advise/item_1.png',
					url: 'pages/advise/image-text-advise'
				}, {
					title: '语音建议',
					subtitle: '用嘴说，提高你的提问效率',
					icon: '/static/img/advise/item_2.png',
					url: 'pages/advise/recorder-advise'
				}, {
					title: '视频随手拍',
					subtitle: '用嘴说，提高你的提问效率',
					icon: '/static/img/advise/item_3.png',
					url: 'pages/advise/video-advise'
				}]
			}
		},
		methods: {
			itemClick(item) {
				this.$jump.toJump(item.url)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-root-bg {
		width: 100vw;
		height: 100vh;
		background: url('@/static/img/bg.png');
		background-size: 100% 100%;

		.content-box {
			width: 100%;
			height: 88%;
			padding: 20rpx;
		}
	}

	.bjimg_0 {
		background-image: url(@/static/img/advise/item_bg_1.png);
	}

	.bjimg_1 {
		background-image: url(@/static/img/advise/item_bg_2.png);
	}

	.bjimg_2 {
		background-image: url(@/static/img/advise/item_bg_3.png);
	}

	.list {
		width: 100%;
		padding: 20rpx 0;

		.list-item {
			display: flex;
			align-items: center;
			margin: 30rpx 0;
			padding-left: 40rpx;
			height: 200rpx;
			background-size: 100% 100%;
			border-radius: $border-radius-lg;


			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 100%;
				margin-right: 20rpx;
			}

			.desc {
				display: flex;
				flex-direction: column;
				color: #fff;

				.title {
					font-size: $font-size-medium;
					margin-bottom: 10rpx;
				}
			}
		}
	}
</style>